<template>
	<div class="game-container report-container">
		<el-tabs v-model="clientType" @tab-click="loadData">
			<el-tab-pane
				:label="$t('operation.client_banner.app_device')"
				name="0"
			>
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="1"
						align="center"
						:label="$t('game.venue_access_manage.venue_type')"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.venueCode,
									'bwVenueTypeList'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="2"
						align="center"
						:label="$t('operation.venue_image.venue_image_name')"
					>
						<template slot-scope="scope">
							{{ scope.row.pageName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="3"
						align="center"
						:label="$t('common.image')"
					>
						<template slot-scope="scope">
							<span
								class="text-link"
								@click="
									rowData = scope.row
									imageViewerVisible = true
								"
							>
								{{ $t('common.click_show') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="4"
						align="center"
						:label="$t('common.last_updateBy')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy }}
						</template>
					</el-table-column>
					<el-table-column
						prop="5"
						align="center"
						:label="$t('common.last_updateAt')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt }}
						</template>
					</el-table-column>
					<el-table-column
						prop="actions"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('501021')"
								type="success"
								size="medium"
								class="noicon"
								@click="editClick(scope)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane
				:label="$t('operation.client_banner.h5_device')"
				name="1"
			>
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="1"
						align="center"
						:label="$t('game.venue_access_manage.venue_type')"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.venueCode,
									'bwVenueTypeList'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="2"
						align="center"
						:label="$t('operation.venue_image.venue_image_name')"
					>
						<template slot-scope="scope">
							{{ scope.row.pageName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="3"
						align="center"
						:label="$t('common.image')"
					>
						<template slot-scope="scope">
							<span
								class="text-link"
								@click="
									rowData = scope.row
									imageViewerVisible = true
								"
							>
								{{ $t('common.click_show') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="4"
						align="center"
						:label="$t('common.last_updateBy')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy }}
						</template>
					</el-table-column>
					<el-table-column
						prop="5"
						align="center"
						:label="$t('common.last_updateAt')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt }}
						</template>
					</el-table-column>
					<el-table-column
						prop="actions"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('501021')"
								type="success"
								size="medium"
								class="noicon"
								@click="editClick(scope)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- <el-tab-pane :label="$t('operation.client_banner.pc_device')" name="2">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="1"
						align="center"
						:label="$t('game.venue_access_manage.venue_type')"
					>
						<template slot-scope="scope">
							{{ scope.row.venueName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="2"
						align="center"
						:label="$t('operation.venue_image.venue_image_name')"
					>
						<template slot-scope="scope">
							{{ scope.row.pageName || '-' }}
						</template>
					</el-table-column>
					<el-table-column prop="3" align="center" :label="$t('common.image')">
						<template slot-scope="scope">
							<span
								class="text-link"
								@click="
									rowData = scope.row
									imageViewerVisible = true
								"
							>
								{{ $t('common.click_show') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="4"
						align="center"
						:label="$t('common.last_updateBy')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy }}
						</template>
					</el-table-column>
					<el-table-column
						prop="5"
						align="center"
						:label="$t('common.last_updateAt')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt }}
						</template>
					</el-table-column>
					<el-table-column
						prop="actions"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('501021')"
								type="success"
								size="medium"
								class="noicon"
								@click="editClick(scope)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane> -->
		</el-tabs>
		<el-dialog
			:visible.sync="visible"
			:title="$t('common.edit')"
			width="700px"
		>
			<el-form
				:key="addForm.pictureUrl + rowData.id + rowData.updatedAt"
				ref="form"
				:model="addForm"
				:rules="rules"
				label-width="auto"
				@submit.native.prevent
			>
				<el-form-item
					:label="$t('operation.venue_image.venue_image_name') + ':'"
					prop="pageName"
				>
					<el-input
						v-model="addForm.pageName"
						clearable
						maxlength="100"
					/>
				</el-form-item>
				<el-form-item
					:label="
						$t('operation.venue_image.venue_image_upload') + ':'
					"
					prop="pictureUrl"
					class="upload-item-form"
				>
					<UploadItem
						ref="imgUpload"
						:upload-file-type="'image'"
						:platform="'PC'"
						:uploadAPI="uploadAPI"
						:bounds="bounds"
						:fileSize="fileSize"
						:img-url="addForm.pictureUrl"
						@upoladItemSucess="handleUploadSucess"
						@startUpoladItem="handleStartUpload"
						@deleteUpoladItem="handleDeleteUpload"
						@upoladItemDefeat="handleUploadDefeat"
					></UploadItem>
					<div class="upload-item-form-tip">
						<span class="upload-item-form-start">*</span>
						{{ $t('operation.upload_tips1') }}png、jpg
						<br />
						{{ $t('operation.upload_tips2') }}{{ bounds.width }}*{{
							bounds.height
						}}
						{{ $t('operation.upload_tips3') }}2M
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="edit">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<image-viewer
			:visible.sync="imageViewerVisible"
			:url-list="[rowData.pictureUrl]"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { homeVenueList, homeVenueUpdate } from '@/api/operation'
import UploadItem from '@/components/UploadItemLimit'

export default {
	name: routerNames.venueImage,
	components: {
		UploadItem
	},
	mixins: [list],
	data() {
		return {
			clientType: '0',
			loading: false,
			imageViewerVisible: false,
			tableData: [1],
			visible: false,
			rowData: {},
			addForm: {
				pictureUrl: '',
				pageName: ''
			}
		}
	},
	computed: {
		uploadAPI() {
			return this.$api.displayPageUploadImage
		},
		fileSize() {
			return 2 * 1024 * 1024
		},
		bounds() {
			const array = ['dy', 'qkl']
			if (+this.clientType === 0 || +this.clientType === 1) {
				if (array.includes(this.rowData.venueCode)) {
					return {
						width: 164 * 3,
						height: 96 * 3
					}
				}
				return {
					width: 104 * 3,
					height: 96 * 3
				}
			} else {
				return {
					width: 504,
					height: 438
				}
			}
		},
		rules() {
			return {
				pageName: [
					{
						required: true,
						message:
							this.$t('common.please_enter') +
							this.$t('operation.venue_image.venue_image_name'),
						trigger: ['change', 'blur']
					}
				],
				pictureUrl: [
					{
						required: true,
						message: this.$t('operation.venue_image.input_tips1'),
						trigger: ['change', 'blur']
					}
				]
			}
		}
	},
	watch: {
		'addForm.pictureUrl'(value) {
			if (!this.$refs[`imgUpload`]) return
			if (value) {
				this.$refs[`imgUpload`].state = 'image'
				this.$refs.imgUpload.fileUrl = value
			} else {
				this.$refs.imgUpload.fileUrl = ''
			}
		}
	},
	created() {
		this.loadData()
	},
	methods: {
		// 列表数据获取
		loadData() {
			this.loading = true
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				clientType: +this.clientType,
				configType: 0
			}
			homeVenueList(params).then((res) => {
				this.loading = false
				this.tableData = res.data.record
				this.total = res.data.totalRecord
			})
		},
		handleUploadDefeat() {
			this.addForm.pictureUrl = ''
			this.$refs.imgUpload.fileUrl = ''
		},
		handleDeleteUpload() {
			this.addForm.pictureUrl = ''
			this.$refs.imgUpload.fileUrl = ''
			this.$message.warning(this.$t('common.upload_del'))
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }) {
			this.addForm.pictureUrl = file.imgUrl
			this.$refs['form'].validateField('pictureUrl')
		},
		async edit() {
			const res = await this.$refs.form.validate()
			if (!res) return
			homeVenueUpdate({
				clientType: this.rowData.clientType,
				id: this.rowData.id,
				loadStatus: this.rowData.loadStatus,
				merchantClientId: this.rowData.merchantClientId,
				pageStatus: this.rowData.pageStatus,
				pictureUrl: this.addForm.pictureUrl,
				remark: this.rowData.remark,
				pageName: this.addForm.pageName
			}).then((res) => {
				if (res?.code === 200) {
					this.visible = false
					this.$message({
						message: this.$t('common.action_success'),
						type: 'success'
					})
				} else {
					this.$message({
						message: res?.msg,
						type: 'error'
					})
				}
				this.loadData()
			})
		},
		editClick(scope) {
			Object.assign(this.addForm, scope.row)
			this.rowData = scope.row
			this.visible = true
			this.$nextTick(() => {
				this.$refs.form && this.$refs.form.resetFields()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.game-container {
	word-break: break-word;
}

.upload-item-form {
	::v-deep .el-form-item__content {
		margin-top: 4px;
		display: flex;
		align-items: center;
		row-gap: 16px;
	}
}

.upload-item-form-start {
	color: #f56c6c;
}

.upload-item-form-tip {
	margin-left: 16px;
	line-height: 1;
	word-break: break-word;
}
</style>
